<template>
  <div v-if="netList">
    <NetBtn :checkNet="checkNet" @successDel="fetchNet"></NetBtn>
    <SerchInput :serchdata="netList" @serchActive="serchActive" style="margin-top: 20px"></SerchInput>
    <NetTable :dataList="AfterChangeData" @changecheck="changecheck"></NetTable>
    <div class="page" v-if="netList">
      <div class="pagenum">
        {{ $t('Network_di')}}
        <el-select v-model="pageNum" placeholder="请选择活动区域" style="width: 55px" size="mini">
          <el-option :label="item" :value="item" v-for="item in Math.ceil((serchList ? serchList.length : netList.length)/pageSize)" :key="item"></el-option>
        </el-select>
        {{ $t('Network_page')}}
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="serchList ? serchList.length : netList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Select, Option, Input, Button, Popover, Table, TableColumn, Pagination } from 'element-ui'
import post from '@/utils/post'
import NetBtn from '@/components/network/NetBtn'
import SerchInput from '@/components/network/SerchInput'
import NetTable from '@/components/network/NetTable'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Button)
Vue.use(Popover)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)

export default {
  data () {
    return {
      netList: null, // 请求的列表
      serchList: null, // 搜索匹配的列表
      checkNet: [], // 选中的网络
      pageNum: 1, // 当前页
      pageSize: 7 // 每页显示数量
    }
  },
  mounted () {
    // 进入页面首次请求数据
    this.fetchNet()
  },
  computed: {
    // 返回当前页面显示的数据
    AfterChangeData () {
      let start = (this.pageNum - 1) * this.pageSize
      let end = this.pageNum * this.pageSize
      return (this.serchList ? this.serchList.slice(start, end) : this.netList.slice(start, end))
    }
  },
  methods: {
    // 分页大小改变
    handleSizeChange (val) {
      this.pageSize = val
    },
    // 当前页数改变
    handleCurrentChange (val) {
      this.pageNum = val
    },
    // 处理搜索返回来的值
    serchActive (data) {
      this.serchList = data
    },
    // 处理table选择的网络
    changecheck (data) {
      this.checkNet = data
    },
    // 请求网络列表
    fetchNet () {
      const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/networks"' // 网络列表
      post({ docker }, (res) => {
        this.netList = res
      }, this)
    }
  },
  components: {
    NetBtn,
    SerchInput,
    NetTable
  }
}
</script>

<style lang="scss" scoped>
.page{
  margin-top: 30px;
  float: right;
  display: flex;
  line-height: 28px;
  margin-right: 80px;
  .pagenum{
    margin-right: 10px;
  }
}
</style>
